import * as React from 'react'
import { StyleSheet, SafeAreaView, StatusBar, View } from 'react-native'
import { NavigationContainer } from '@react-navigation/native'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import Index from './Index';
import City from './pages/city';
import Login from './pages/login';
import Register from './pages/register'
import Search from './pages/search';
import { Provider } from 'mobx-react'
import store from './store';
import Detail from './pages/detail';

const Stack = createNativeStackNavigator()

export default function App() {
  return (
    <Provider store = { store }>
      <SafeAreaView style={styles.container}>
      <StatusBar />
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="/" component={ Index } options={{
            headerShown: false
          }}/>
          <Stack.Screen name="/index" component={ Index } options={{
            headerShown: false
          }}/>
          <Stack.Screen name="/city" component={ City } options={{
            headerShown:false,
          }}/>
          <Stack.Screen name="/login" component={ Login } options={{
            headerShown:false,
          }}/>
          <Stack.Screen name="/register" component={ Register } options={{
            headerShown:false,
          }}/>
          <Stack.Screen name="/search" component={ Search } options={{
            headerShown:false,
          }}/>
          <Stack.Screen name="/detail" component={ Detail } options={{
            headerShown:false,
          }}/>
        </Stack.Navigator>
      </NavigationContainer>
    </SafeAreaView>
    </Provider>
    
  )
}

const styles = StyleSheet.create({
  container:{
    flex: 1
  }
})
